import { Tabs, } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';

<Example>
<ExampleCode>
<Tabs.Container defaultValue="InAppMessagingProvider/InAppMessageDisplay">
  <Tabs.List>
    <Tabs.Item value="InAppMessagingProvider/InAppMessageDisplay">InAppMessagingProvider/InAppMessageDisplay</Tabs.Item>
    <Tabs.Item value="withInAppMessaging">withInAppMessaging</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="InAppMessagingProvider/InAppMessageDisplay">

```jsx
import React, { useEffect } from 'react';
import { Text } from 'react-native';

import { Amplify, Notifications } from 'aws-amplify';
import {
  InAppMessageDisplay,
  InAppMessagingProvider,
} from '@aws-amplify/ui-react-native';

import config from './aws-exports';

const { InAppMessaging } = Notifications;

Amplify.configure(config);

function App() {
  useEffect(() => {
    // sync remote in-app messages
    InAppMessaging.syncMessages();
  }, []);

  return (
    <InAppMessagingProvider>
      <InAppMessageDisplay />
      <Text>In-App Messaging Example</Text>
    </InAppMessagingProvider>
  );
}

export default App;
```

</Tabs.Panel>
<Tabs.Panel value="withInAppMessaging">

```jsx
import React, { useEffect } from 'react';
import { Text } from 'react-native';

import { Amplify, Notifications } from 'aws-amplify';
import { withInAppMessaging } from '@aws-amplify/ui-react-native';

import config from './aws-exports';

const { InAppMessaging } = Notifications;

Amplify.configure(config);

function App() {
  useEffect(() => {
    // sync remote in-app messages
    InAppMessaging.syncMessages();
  }, []);

  return <Text>In-App Messaging Example</Text>;
}

export default withInAppMessaging(App);
```
   
  </Tabs.Panel>
</Tabs.Container>
</ExampleCode>
</Example>
